<template>
  <div>
      <h2>Person Component</h2>
      <input type="text" v-model="name">
      <button @click="addPerson">Add Person</button>
      <ul>
          <li v-for="p in personList" :key="p.id"> {{p.name}}</li>
      </ul>
      <p>Count组件中的和为：{{sum}}</p>
  </div>
</template>

<script>
import { mapState} from 'vuex';
import {nanoid} from 'nanoid';
export default {
    data(){
        return {
            name:''
        }
    },
    computed:{
        ...mapState(['personList','sum']),
        
    },
    methods:{
        
        addPerson() {
            if(this.name!==""){
                const personObj = {id:nanoid(),name:this.name}
                this.name='';
                this.$store.commit('ADD_PERSON',personObj)
            }else{
                alert('name is not allowed to be empty..')
            }
          
        }
    }
}
</script>

<style>

</style>